<template>
  <!-- <div>{{ $t('测试1') }}</div> -->
  <div>
    <a-dropdown v-model:popup-visible="showDropdown" :popup-max-height="false" :hide-on-select="false">
      <a-input-tag readonly @click="showDropdown = !showDropdown" :max-tag-count="1" v-model="defaultValue" :style="{ width: '200px', backgroundColor: 'white', border: '1px solid #dadde2', borderRadius: '5px' }" placeholder="Please enter something" :size="size" allow-clear>
        <template #suffix v-if="defaultValue.length <= 0">
          <icon-down v-if="!showDropdown" />
          <icon-up v-else />
        </template>
        <template #suffix v-if="defaultValue.length > 0"><icon-close /> </template>
      </a-input-tag>
      <template #content>
        <div class="header">
          <a-input @input="searchVal" v-focus :style="{ border: '1px solid #dadde2', backgroundColor: 'white' }" allow-clear placeholder="请输入" />
        </div>
        <div class="user-sel-box" v-if="options.length > 0">
          <a-doption>
            <a-checkbox :model-value="checkedAll" :indeterminate="indeterminate" @change="handleChangeAll">全部</a-checkbox>
          </a-doption>

          <a-scrollbar style="height: 200px; overflow: auto">
            <a-checkbox-group style="width: 100%" v-model="selData" @change="handleChange">
              <a-doption v-for="(item, index) in options" :key="index">
                <a-checkbox :value="item.value">{{ item.label }}</a-checkbox>
              </a-doption>
            </a-checkbox-group>
          </a-scrollbar>
        </div>

        <div style="padding: 50px 70px" v-if="options.length <= 0"> <a-empty /> </div>

        <div class="footer">
          <div v-if="selData.length > 0" class="left">已选{{ selData.length }}项</div>
          <div class="right">
            <a-button size="mini" style="margin-right: 5px" @click="cancel">取消</a-button>
            <a-button type="primary" size="mini" @click="addVal">确定</a-button>
          </div>
        </div>
      </template>
    </a-dropdown>
  </div>
</template>

<script lang="ts">
  import { defineComponent, reactive, ref } from 'vue'
  interface optiosnType {
    label: string
    value: string
  }
  export default defineComponent({
    setup() {
      // const showIconDown = ref<boolean>(false)
      const options1 = [
        {
          label: '测试1',
          value: '1',
        },
        {
          label: '测试2',
          value: '2',
        },
        {
          label: '测试3',
          value: '3',
        },
        {
          label: '测试4',
          value: '4',
        },
        {
          label: '测试5',
          value: '5',
        },
        {
          label: '测试6',
          value: '6',
        },
        {
          label: '测试7',
          value: '7',
        },
        {
          label: '测试8',
          value: '8',
        },
        {
          label: '测试9',
          value: '9',
        },
        {
          label: '测试10',
          value: '10',
        },
      ]
      let options = ref([
        {
          label: '测试1',
          value: '1',
        },
        {
          label: '测试2',
          value: '2',
        },
        {
          label: '测试3',
          value: '3',
        },
        {
          label: '测试4',
          value: '4',
        },
        {
          label: '测试5',
          value: '5',
        },
        {
          label: '测试6',
          value: '6',
        },
        {
          label: '测试7',
          value: '7',
        },
        {
          label: '测试8',
          value: '8',
        },
        {
          label: '测试9',
          value: '9',
        },
        {
          label: '测试10',
          value: '10',
        },
      ])
      let defaultValue = ref([1, 2, 3, 4])
      const indeterminate = ref(false)
      const checkedAll = ref(false)
      const selData = ref([])
      const showDropdown = ref<boolean>(false)
      // const show = (val: boolean) => {
      //   showIconDown.value = val
      // }

      const handleChangeAll = (value: any) => {
        indeterminate.value = false
        if (value) {
          checkedAll.value = true
          selData.value = options.value.map((e) => e.value) as any
        } else {
          checkedAll.value = false
          selData.value = []
        }
      }

      const handleChange = (values: any) => {
        if (values.length === options.value.length) {
          checkedAll.value = true
          indeterminate.value = false
        } else if (values.length === 0) {
          checkedAll.value = false
          indeterminate.value = false
        } else {
          checkedAll.value = false
          indeterminate.value = true
        }
      }

      const searchVal = (searchText: string) => {
        if (!searchText) {
          options.value = options1
        } else {
          let filteredList = options.value.filter((e: optiosnType) => e.label.indexOf(searchText) != -1)
          options.value = filteredList
        }
      }

      const addVal = () => {
        let arr = []
        defaultValue.value = selData.value
        showDropdown.value = false
        console.log(defaultValue.value)

        // selData.value.forEach((e: any) => {
        //   options.value.find((el) => {
        //     if (e == el.value) {

        //     }
        //   })
        // })
        // options.value.find((el) => {
        //   selData.value.forEach((e: any) => {
        //     if (el.value == e) {
        //     }
        //   })
        // })
      }

      const cancel = () => {
        showDropdown.value = false
      }

      return {
        // show,
        // showIconDown,
        defaultValue,
        options,
        indeterminate,
        checkedAll,
        selData,
        handleChangeAll,
        handleChange,
        showDropdown,
        searchVal,
        addVal,
        cancel,
      }
    },
    directives: {
      focus: {
        mounted(el, binding, vnode) {
          el.children[0].focus()
        },
      },
    },
  })
</script>

<style lang="less" scoped>
  .header {
    width: 100%;
    padding: 5px 10px;
    box-sizing: border-box;
    background: white;
  }

  .user-sel-box {
  }

  .footer {
    width: 100%;
    overflow: hidden;
    padding: 5px 10px;
    box-sizing: border-box;
    border-top: 1px solid #dadde2;
    .left {
      float: left;
      font-size: 12px;
    }
    .right {
      float: right;
    }
  }
</style>
